<template>
  <div class="search-container">
    <div class="label">输入搜索</div>
    <el-input
      v-model="courseID"
      placeholder="输入课程ID"
      size="small"
      @change="searchByID"
    ></el-input>
    <div class="label">上传时间</div>
    <el-date-picker
      v-model="startDate"
      type="date"
      :placeholder="startInputPH"
      value-format="timestamp"
      size="small"
      :picker-options="startPickerOptions"
      @focus="hidePlaceHolder(1)"
      @blur="showPlaceHolder(1)"
    >
    </el-date-picker>
    <div class="el-range-separator"></div>
    <el-date-picker
      v-model="endDate"
      type="date"
      :placeholder="endInputPH"
      value-format="timestamp"
      size="small"
      :picker-options="endPickerOptions"
      @focus="hidePlaceHolder(0)"
      @blur="showPlaceHolder(0)"
    >
    </el-date-picker>
    <el-button class="searchBtn" @click="searchByDate">查询</el-button>
    <el-button @click="resetForm">重置</el-button>
    <el-dropdown trigger="click">
      <span class="el-dropdown-link label">
        <i class="el-icon-arrow-down el-icon--right"></i>
        高级筛选
      </span>
      <el-dropdown-menu slot="dropdown">
        <div style="padding: 4px 20px 0 10px">
          <label style="display: flex; align-items: center">
            <input
              v-model="typeList"
              value="1"
              type="checkbox"
              style="width: 14px; height: 14px; margin: 0 16px 0 0"
            />
            <span style="font-size: 14px">上架</span>
          </label>
        </div>
        <div style="padding: 14px 20px 0 10px">
          <label style="display: flex; align-items: center">
            <input
              v-model="typeList"
              value="0"
              type="checkbox"
              style="width: 14px; height: 14px; margin: 0 16px 0 0"
            />
            <span style="font-size: 14px">下架</span>
          </label>
        </div>
      </el-dropdown-menu>
    </el-dropdown>
  </div>
</template>

<script>
import Bus from "../../../utils/bus";
export default {
  data() {
    return {
      courseID: "",
      startDate: "",
      startInputPH: "开始日期",
      endDate: "",
      endInputPH: "结束日期",
      date: "",
      typeList: [],
    };
  },
  computed: {
    startPickerOptions() {
      let temp = this.endDate || Infinity;
      return {
        disabledDate(time) {
          return time.getTime() >= temp;
        },
      };
    },
    endPickerOptions() {
      let temp = this.startDate || 0;
      return {
        disabledDate(time) {
          return time.getTime() <= temp;
        },
      };
    },
  },
  methods: {
    hidePlaceHolder(val) {
      if (val == 1) {
        this.startInputPH = "";
      } else {
        this.endInputPH = "";
      }
    },
    showPlaceHolder(val) {
      if (val == 1) {
        this.startInputPH = "开始日期";
      } else {
        this.endInputPH = "结束日期";
      }
    },
    // 通过id查找数据
    searchByID() {
      Bus.$emit("resetPage");
      this.$parent.getData();
    },
    // 点击查询查找数据
    searchByDate() {
      Bus.$emit("resetPage");
      this.$parent.getData();
    },
    // 重置搜索
    resetForm() {
      this.courseID = "";
      this.startDate = "";
      this.endDate = "";
      this.typeList = [];
    },
  },
};
</script>

<style lang="less" scoped>
.search-container {
  display: flex;
  align-items: center;
  width: 100%;
  height: 64px;
  background-color: #fff;
  line-height: 64px;
  > div {
    float: left;
  }
  .label {
    margin: 0 8px 0 30px;
    font-size: 16px;
    font-weight: bold;
  }
  .el-input {
    width: 150px;
    /deep/.el-input__inner {
      padding: 0 12px;
      &::placeholder {
        font-size: 12px;
        color: #333;
      }
    }
  }
  /deep/.el-date-editor {
    height: 100%;
    border: none;
    padding: 0;
    .el-input__icon {
      display: none;
    }
  }
  .el-range-separator {
    width: 20px;
    height: 2px;
    margin: 0 16px;
    padding: 0;
    background-color: #dcdfe6;
    line-height: 64px;
  }
  .el-button {
    margin-left: 30px;
    padding-left: 24px;
    padding-right: 24px;
    font-weight: bold;
    font-size: 16px;
    height: 32px;
    display: flex;
    align-items: center;
  }
  /deep/.searchBtn {
    background-color: #438afe;
    color: #fff;
  }
  .el-dropdown-link {
    cursor: pointer;
    color: #409eff;
  }
  .el-icon-arrow-down {
    font-size: 18px;
    font-weight: bolder;
  }
  .demonstration {
    display: block;
    color: #8492a6;
    font-size: 14px;
    margin-bottom: 20px;
  }
}
</style>
